import React from 'react'
import { Timeline } from 'antd'
import { List, Page } from 'components'
import changelog from './changelog'

const TimeItem = Timeline.Item
const ChangeLog = () => {
  const timeItemOptions = changelog.map((current) => {
    const currentOptions = []
    if (current.version) {
      currentOptions.push(<p>{current.version}</p>)
    }
    if (current.content) {
      current.content.forEach((item) => {
        currentOptions.push(<p>{item}</p>)
      })
    }
    if (current.updateDate) {
      currentOptions.push(<p>{current.updateDate}</p>)
    }
    return <TimeItem color={current.color}>{currentOptions}</TimeItem>
  })

  return (
    <Page inner>
      <Timeline>
        { timeItemOptions }
      </Timeline>
    </Page>
  )
}

ChangeLog.propTypes = {
}


export default ChangeLog
